<template>
  <div class="news-box">
    <div class="vflex">
      <el-card class="vcard">
        <ul class="query-list clearfix">
          <li>
            <span>{{ $t("assessment.Time") }}：</span>
            <p :class="{ 'p-left': lang === 'en' }">
              <el-date-picker
                v-model="timeStart"
                class="el-picker"
                type="date"
                placeholder="开始时间"
                @change="switchTime"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <span class="date-select-right">-</span>
              <el-date-picker
                v-model="timeEnd"
                class="el-picker"
                type="date"
                placeholder="结束时间"
                @change="switchTime"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </p>
          </li>
          <!-- <li>
            <span>信息来源：</span>
            <p>
              <span class="lab">全部</span>
              <span class="lab">问答</span>
              <span class="lab">新闻</span>
              <span class="lab">博客</span>
              <span class="lab">论坛</span>
              <span class="lab">微博</span>
              <span class="lab">口碑</span>
              <span class="lab">微信</span>
            </p>
          </li> -->
          <li>
            <span>{{ $t("assessment.LabelSelection") }}：</span>
            <p :class="{ 'p-left': lang === 'en' }">
              <span
                v-for="(item, index) in tagList"
                :key="index"
                class="lab"
                :class="{ active: tagListActiveArr.indexOf(index) > -1 }"
                @click="switchTag(index)"
                >{{ item.key }}</span
              >
            </p>
          </li>
          <li>
            <span>{{ $t("assessment.EmotionLevel") }}：</span>
            <p :class="{ 'p-left': lang === 'en' }">
              <span
                v-for="(item, index) in sentimentList"
                :key="index"
                class="lab"
                :class="{ active: sentimentListActiveArr.indexOf(index) > -1 }"
                @click="switchSentiment(index)"
                >{{ item.key }}</span
              >
            </p>
          </li>
          <!-- <li>
            <span>企业属性：</span>
            <span class="lab">全部</span>
            <span class="lab">监控企业</span>
            <span class="lab">关联企业</span>
          </li> -->
        </ul>
      </el-card>
    </div>
    <!-- 信息走势 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title2"
            ><i></i>{{ $t("assessment.InfoTrend") }}</v-card-title
          >
          <div
            id="chartNewsOne"
            class="chart"
            :class="{ vshow: isHaveChartNewsOne === true }"
          ></div>
          <div class="no-data" v-show="isHaveChartNewsOne === false">
            {{ $t("assessment.NoDataAvailable") }}
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!--  -->
    <!-- 暂时先隐藏 -->
    <v-layout v-show="false">
      <v-flex class="vflex" xs12>
        <v-layout>
          <!-- 分类统计 -->
          <v-flex class="vflex right" xs6>
            <v-card class="vcard">
              <v-card-title class="vcard-title2"
                ><i></i
                >{{ $t("assessment.ClassifiedStatistics") }}</v-card-title
              >
              <div
                id="chartNewsTwo"
                class="chart2"
                :class="{ vshow: isHaveChartNewsTwo === true }"
              ></div>
              <div class="no-data2" v-show="isHaveChartNewsTwo === false">
                {{ $t("assessment.NoDataAvailable") }}
              </div>
            </v-card>
          </v-flex>
          <!-- 负面指数 -->
          <v-flex class="vflex" xs6>
            <v-card class="vcard">
              <v-card-title class="vcard-title2"
                ><i></i>{{ $t("assessment.NegativeIndex") }}</v-card-title
              >
              <div
                id="chartNewsThree"
                class="chart2"
                :class="{ vshow: isHaveChartNewsThree === true }"
              ></div>
              <div
                class="no-data2"
                v-show="isHaveChartNewsThree === false"
                style="width:100%;height:300px;line-height:300px;text-align:center"
              >
                {{ $t("assessment.NoDataAvailable") }}
              </div>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <!-- 搜索结果列表 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title2"
            ><i></i>{{ $t("assessment.AllSearchResults") }}</v-card-title
          >
          <i class="result-num" v-if="lang === 'en'"
            >{{ totalVal }}&nbsp;{{ $t("assessment.resultFound") }}</i
          >
          <i class="result-num" v-else
            >{{ $t("assessment.resultFound") }}&nbsp;{{ totalVal }}个</i
          >
          <ul class="result-list">
            <li v-for="(item, index) in resultList" :key="index">
              <a
                class="title"
                :title="item._source.title"
                :href="item._source.url"
                target="_blank"
                >{{ item._source.title }}</a
              >
              <p class="abst" v-html="item._source.content"></p>
              <div class="footer">
                <p>
                  {{ item._source.source }}&nbsp;&nbsp;{{ item._source.time }}
                </p>
                <p class="btn-p">
                  <span
                    class="tag"
                    v-for="(ite, j) in item._source.tagArr"
                    :key="j"
                    >{{ ite }}</span
                  >
                  <span
                    class="sentiment"
                    :class="{
                      normal: item._source.sentiment === '正面',
                      neutral: item._source.sentiment === '中性',
                      negative: item._source.sentiment === '负面',
                    }"
                    >{{ item._source.sentiment }}</span
                  >
                </p>
              </div>
            </li>
          </ul>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="ips"
              @current-change="getCurrentPage"
              :current-page.sync="currentPage"
              class="el-pagination"
            >
            </el-pagination>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 翻译 -->
    <v-dialog v-model="article" max-width="700px">
      <v-card>
        <ul class="article clearfix">
          <li>
            <h3>
              它是解放军在南海的一个杀手锏?朗星AT200无人机2019投资策略分析报告
            </h3>
            <p class="tip">
              <span>人民网</span>
              <span>08:23:21</span>
            </p>
            <p class="content">
              222222
            </p>
            <a class="href-btn">点击查看详情</a>
          </li>
          <li>
            <h3>
              它是解放军在南海的一个杀手锏?朗星AT200无人机2019投资策略分析报告
            </h3>

            <p class="tip">
              <span>人民网</span>
              <span>08:23:21</span>
            </p>
            <p class="content">
              222222
            </p>
            <a class="href-btn">点击查看详情</a>
          </li>
        </ul>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import Ecolors from "@/utils/chartsColors.js";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      lang: this.$cookie.get("lang") || "",
      companyName: this.$cookie.get("companyName") || "",
      timeStart: "", // 时间选择
      timeEnd: "",

      source: [], // 信息来源
      sourceList: [],
      sourceListActive: 0,

      tag: [], // 标签选择
      tagList: [],
      tagListActiveArr: [0],

      sentiment: [], // 情感等级
      sentimentList: [],
      sentimentListActiveArr: [0],

      // 信息走势
      infoMoveData: "",
      ipcNumber: 3,
      chartNewsOne: [],
      isHaveChartNewsOne: "",
      // 分类统计
      classifyData: "",
      chartNewsTwo: "",
      isHaveChartNewsTwo: "",
      // 负面指数
      negativeData: [],
      chartNewsThree: "",
      isHaveChartNewsThree: "",
      // 搜索结果列表
      resultList: [],
      // 分页
      total: 0,
      totalVal: "",
      from: 0, // 分页开始条数
      currentPage: 1,
      ips: 10,
      // 文章翻译
      article: false, // 等接入译见后展示
    };
  },
  methods: {
    search() {
      this.timeStart !== ""
        ? this.timeStart
        : (this.timeStart = `${new Date().getFullYear() -
            1}-${new Date().getMonth() + 1}-${new Date().getDate()}`);
      this.timeEnd !== ""
        ? this.timeEnd
        : (this.timeEnd = `${new Date().getFullYear()}-${new Date().getMonth() +
            1}-${new Date().getDate()}`);
      // this.source!=='' ? query.push({source: this.source}): query
      // this.tag!=='' ? query.push({tag: this.tag}): query
      // this.sentiment!=='' ? query.push({sentiment: this.sentiment}): query
      this.$post(this.$Url.news.search, {
        from: this.from,
        size: this.ips,
        name: this.companyName,
        tag: this.tag,
        sentiment: this.sentiment,
        gte: this.timeStart,
        lte: this.timeEnd,
      })
        .then((res) => {
          let data = res.data;
          if (this.tagList.length <= 0) {
            this.tagList = [{ key: this.$t("assessment.All") }].concat(
              ...data.agg["tag-aggs"].buckets
            );
          }
          if (this.sentimentList <= 0) {
            this.sentimentList = [{ key: this.$t("assessment.All") }].concat(
              ...data.agg["sentiment-aggs"].buckets
            );
          }
          // 信息走势
          this.infoMoveData = data.agg["time-aggs"].buckets;
          this.renderInfoMove();
          // 分类统计
          this.classifyData = data.agg["tag-aggs"].buckets;
          this.renderClassify(data.items.total);
          // 负面指数
          this.negativeData = data.agg["sentiment-aggs"].buckets;
          this.renderNegative();
          // 搜索结果列表
          this.total = data.items.total.value;
          this.totalFilter();
          let hits = data.items.hits;
          hits.forEach((v) => {
            if (v._source.small_tag) {
              v._source.tagArr = v._source.small_tag;
            } else {
              if (typeof v._source.tag === "string") {
                v._source.tagArr = [v._source.tag];
              } else {
                v._source.tagArr = this.checkChar(v._source.tag);
              }
            }
          });
          this.resultList = hits;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 转义字符串数据
    checkChar(str) {
      let arr = [];
      for (let i in str) {
        let s = str[i];
        if (s.indexOf("[") > -1 || s.indexOf("]") > -1) {
          s = str[i]
            .replace('["[\\', "")
            .replace('\\"', "")
            .replace('\\"]"]', '"')
            .replace('["', "")
            .replace('"]', "")
            .replace(/"/g, "");
        }
        arr.push(s);
      }
      return arr;
    },
    // 千分符
    totalFilter() {
      let intPart = Number(this.total).toFixed(0);
      let intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      this.totalVal = intPartFormat;
    },
    // 切换时间区间
    switchTime() {
      this.from = 0;
      this.currentPage = 1;
      this.search();
    },
    // 切换标签选择
    switchTag(index) {
      if (index === 0) {
        this.tagListActiveArr = [0];
      } else {
        // 清除0
        let zeroAngle = this.tagListActiveArr.indexOf(0);
        if (zeroAngle > -1) {
          this.tagListActiveArr.splice(zeroAngle, 1);
        }

        // 用户选择的标签存入数组中
        let angle = this.tagListActiveArr.indexOf(index);
        if (angle > -1) {
          if (this.tagListActiveArr.length > 1) {
            this.tagListActiveArr.splice(angle, 1);
          }
        } else {
          this.tagListActiveArr.push(index);
        }
      }

      this.from = 0;
      this.currentPage = 1;

      if (index !== 0) {
        let spliceIndex = this.tag.indexOf(this.tagList[index].key);
        if (spliceIndex > -1) {
          if (this.tag.length > 1) {
            this.tag.splice(spliceIndex, 1);
          }
        } else {
          this.tag.push(this.tagList[index].key);
        }
      } else {
        this.tag = [];
      }
      this.search();
    },
    // 切换情感等级
    switchSentiment(index) {
      if (index === 0) {
        this.sentimentListActiveArr = [0];
      } else {
        // 清除0
        let zeroAngle = this.sentimentListActiveArr.indexOf(0);
        if (zeroAngle > -1) {
          this.sentimentListActiveArr.splice(zeroAngle, 1);
        }
        // 用户选择的标签存入数组中
        let angle = this.sentimentListActiveArr.indexOf(index);
        if (angle > -1) {
          if (this.sentimentListActiveArr.length > 1) {
            this.sentimentListActiveArr.splice(angle, 1);
          }
        } else {
          this.sentimentListActiveArr.push(index);
        }
      }

      this.from = 0;
      this.currentPage = 1;

      if (index !== 0) {
        let spliceIndex = this.sentiment.indexOf(this.sentimentList[index].key);
        if (spliceIndex > -1) {
          if (this.sentiment.length > 1) {
            this.sentiment.splice(spliceIndex, 1);
          }
        } else {
          this.sentiment.push(this.sentimentList[index].key);
        }
      } else {
        this.sentiment = [];
      }
      this.search();
    },
    // 信息走势
    renderInfoMove() {
      this.chartNewsOne = this.$echarts.init(
        document.getElementById("chartNewsOne")
      );
      let _ipcNumber = this.ipcNumber;
      let xAxisData = [],
        yAxisData = [];
      for (let i = 0; i < this.infoMoveData.length; i++) {
        xAxisData.push(this.infoMoveData[i].key_as_string);
        yAxisData.push(this.infoMoveData[i].doc_count);
      }
      if (yAxisData.length > 0) {
        this.isHaveChartNewsOne = true;
      } else {
        this.isHaveChartNewsOne = false;
      }
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000",
          },
          axisPointer: { type: "none" },
        },
        legend: {
          type: "scroll",
          top: "0",
        },
        grid: {
          top: "50",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#f0f1f3",
              width: 2,
            },
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f0f1f3",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2,
            },
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e",
            },
          },
        },
        dataZoom: [
          {
            id: "dataZoomX",
            type: "inside",
            xAxisIndex: [0],
            filterMode: "filter",
          },
        ],
        series: [
          {
            type: "line",
            name: this.$t("assessment.All"),
            color: Ecolors.color[0],
            smooth: 1,
            data: yAxisData,
          },
        ],
      };
      this.chartNewsOne.setOption(option, true);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.chartNewsOne.resize();
        }, 400);
      });
    },
    // 分类统计
    renderClassify(total) {
      this.chartNewsTwo = this.$echarts.init(
        document.getElementById("chartNewsTwo")
      );
      let data = [];
      let count = 0;
      for (let i = 0; i < this.classifyData.length; i++) {
        count += this.classifyData[i].doc_count;
        data.push({
          name: this.classifyData[i].key,
          value: this.classifyData[i].doc_count,
        });
      }
      if (count < total) {
        data.push({
          name: "其他",
          value: total - count,
        });
      }
      if (data.length > 0) {
        this.isHaveChartNewsTwo = true;
      } else {
        this.isHaveChartNewsTwo = false;
      }
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "74%",
          bottom: "30px",
          itemGap: 24,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function(name) {
            return name.length > 20 ? name.slice(0, 8) + "..." : name;
          },
        },
        grid: {
          top: 10,
        },
        color: Ecolors.color,
        series: [
          {
            type: "pie",
            name: "分类统计",
            radius: ["40%", "55%"],
            center: ["35%", "48%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            data: data,
          },
        ],
      };
      this.chartNewsTwo.setOption(option, true);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.chartNewsTwo.resize();
        }, 400);
      });
    },
    // 负面指数
    renderNegative() {
      this.chartNewsThree = this.$echarts.init(
        document.getElementById("chartNewsThree")
      );
      let data = [];
      for (let i = 0; i < this.negativeData.length; i++) {
        data.push({
          name: this.negativeData[i].key,
          value: this.negativeData[i].doc_count,
        });
      }
      if (data.length > 0) {
        this.isHaveChartNewsThree = true;
      } else {
        this.isHaveChartNewsThree = false;
      }
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "74%",
          top: "4%",
          itemGap: 24,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function(name) {
            return name.length > 20 ? name.slice(0, 8) + "..." : name;
          },
        },
        grid: {
          top: 10,
        },
        color: Ecolors.color,
        series: [
          {
            type: "pie",
            name: "负面指数",
            radius: ["40%", "55%"],
            center: ["35%", "48%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            data: data,
          },
        ],
      };
      this.chartNewsThree.setOption(option, true);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.chartNewsThree.resize();
        }, 400);
      });
    },
    getCurrentPage(val) {
      this.currentPage = val;
      val === 1 ? (this.from = 0) : (this.from = (val - 1) * 10);
      this.search();
    },
    // 监听图表resizew
    watchChartResize() {
      this.$Bus.$on("chartResize", (data) => {
        if (data.path && data.path.indexOf("news") > -1) {
          setTimeout(() => {
            this.chartNewsOne.resize();
            this.chartNewsTwo.resize();
            this.chartNewsThree.resize();
          }, 0);
        }
      });
    },
  },
  watch: {
    "$i18n.locale"() {
      this.lang = this.$cookie.get("lang");
    },
  },
  mounted() {
    this.search();
    this.watchChartResize();
  },
};
</script>

<style lang="scss" scoped>
.news-box {
  padding: 20px;
}
.vflex {
  margin-bottom: 20px;
}
.vflex.right {
  margin-right: 15px;
}
.vcard {
  width: 100%;
  height: 100%;
}
.vcard-title,
.vcard-title2 {
  position: relative;
  padding-top: 0;
  font-size: 14px;
  font-weight: 600;
  color: $mainColor;
}
.vcard-title2 {
  padding-top: 20px;
}
.vcard-title i,
.vcard-title2 i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.query-list {
  position: relative;
  margin: 10px 20px;
  list-style: none;
}
.query-list li {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}
.query-list li > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100px;
  line-height: 33px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: $mainColor;
}
.query-list li p {
  padding-left: 80px;
}
.p-left {
  padding-left: 100px !important;
}
.el-picker.el-input {
  width: 160px !important;
}
.date-select-right {
  margin: 0 4px;
}
.lab {
  display: inline-block;
  padding: 6px 18px;
  font-size: 12px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  color: #7775da;
  background-color: #e7e7fc;
  cursor: pointer;
}
.active {
  color: #fff;
  background-color: $mainColor;
}
.result-list {
  position: relative;
  width: 100%;
  padding: 0 24px;
  /* border-top: 1px solid #a9a7e8; */
  list-style: none;
}
.result-num {
  position: absolute;
  top: 20px;
  right: 20px;
  line-height: 30px;
  font-style: normal;
  font-size: 12px;
  color: $mainColor;
}
.result-list li {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #d4d3f3;
}
.result-list li:last-child {
  border-bottom: 0;
}
.result-list li .title {
  display: inline-block;
  padding: 14px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px !important;
  color: $mainColor;
}
.result-list li .abst {
  line-height: 26px;
  font-size: 14px;
  color: #7674a3;
}
.result-list li .footer {
  position: relative;
}
.result-list li .footer p {
  margin-bottom: 0;
}
.result-list li .footer p:nth-child(1) {
  font-size: 14px;
  color: #b8c2d7;
}
.result-list li:hover {
  background-color: #f3f3fe;
}
.result-list li:hover .btn-p .tag {
  color: #fff;
  background-color: $mainColor;
}
.result-list li:hover .btn-p .normal {
  color: #fff;
  background-color: #41b3a2;
}
.result-list li:hover .btn-p .neutral {
  color: #fff;
  background-color: #efa752;
}
.result-list li:hover .btn-p .negative {
  color: #fff;
  background-color: #d96f6f;
}
.btn-p {
  position: absolute;
  top: -10px;
  right: 0;
}
.btn-p span {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
  color: #7775da;
  background-color: #ececf4;
}
.btn-p span.sentiment.normal {
  color: #41b3a2;
  background-color: #e4f6f3;
}
.btn-p span.sentiment.neutral {
  color: #efa752;
  background-color: #fef0df;
}
.btn-p span.sentiment.negative {
  color: #d96f6f;
  background-color: #f8e8e8;
}
/* .btn-p span:hover {
  color: #fff;
  background-color: $mainColor;
} */
.pagination {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.el-pagination {
  padding-right: 0;
}
.chart,
.chart2 {
  width: 100%;
  height: 320px;
  opacity: 0;
}
.chart2 {
  height: 300px !important;
}
.vshow {
  opacity: 1 !important;
}
.no-data,
.no-data2 {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 320px;
  line-height: 300px;
  text-align: center;
}
.no-data2 {
  height: 300px !important;
}
.article {
  position: relative;
  list-style: none;
  padding: 10px;
}
.article li {
  float: left;
  width: 46%;
  margin: 10px 2%;
}
.article li h3 {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: $mainColor;
  word-wrap: break-word;
  word-break: break-all;
}
.article li .tip {
  position: relative;
  margin: 10px 0;
}
.article li .tip span:nth-child(1) {
  display: block;
  padding-right: 80px;
  text-align: left;
  font-size: 12px;
  color: #b8c2d7;
}
.article li .tip span:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  text-align: right;
  font-size: 12px;
  color: #b8c2d7;
}
.article .content {
  line-height: 20px;
  text-align: left;
  font-size: 12px;
  color: #7674a3;
}
.article .href-btn {
  display: inline-block;
  padding: 7px 23px;
  border-radius: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background-color: $mainColor;
  cursor: pointer;
  outline: none;
}
</style>
